<template>
	<view class="container" v-if="commentInfo.userUrl">
		<view class="tui-news-title">
			{{commentInfo.commentTitle}}
		</view>
		<view class="tui-sub-info">
			<view class="tui-sub-left flex align-center">
				<view class="cu-avatar round lg" :style="'background-image:url('+commentInfo.userUrl+');'"></view>
				<view class="margin-left-sm flex flex-direction">
					<text class="tui-author">{{commentInfo.userName}}</text>
					<text>{{commentInfo.commentTime}}</text>
				</view>
			</view>
			<view v-if="isUserCon">

			</view>
			<view v-else class="tui-sub-right" @click="collection">
				<text>{{isCollection?'已关注':'关注'}}</text>
			</view>
		</view>
		<view class="tui-news-content">
			<view class="tui-article">
				{{commentInfo.commentCom}}
			</view>
			<image :src="url" class="tui-article-pic" mode="widthFix" v-for="url in commentInfo.commentImgList" :key="url"></image>
		</view>
		<view class="tui-operate-box">
			<tui-tag :type="isFabulous?'':'gray'" shape="circle" :plain="true" @click="btnFabulous">
				<tui-icon :name="iconName(isFabulous)" :size="20" :color="iconColor"></tui-icon>
				<text class="tui-black" :class="[isFabulous?'tui-primary':'']">{{fabulous}}赞</text>
			</tui-tag>
			<button open-type="share" class="tui-share-btn">
				<tui-tag type="gray" shape="circle" :plain="true">
					<tui-icon name="partake" :size="20" color="#333"></tui-icon>
					<text class="tui-black">分享</text>
				</tui-tag>
			</button>
		</view>

		<view class="tui-cmt-title">精彩评论（{{cmtList.length}}）</view>
		<view class="tui-cmtbox">
			<view class="tui-cmt-cell" v-for="(item,index) in cmtList" :key="index">
				<image :src="item.userUrl" class="tui-avatar"></image>
				<view class="tui-cmt-detail">
					<view class="tui-header-box">
						<view class="tui-cmt-nickname">{{item.userName}}</view>
					</view>
					<view class="tui-cmt-content">
						{{item.comentCom}}
					</view>

				</view>
			</view>

		</view>

		<view class="tui-operation">
			<view class="tui-operation-left tui-col-10 tui-height-full tui-ptop-zero">
				<input type="text" placeholder="发表你的评论..." class="tui-btn-comment" v-model="val" />
			</view>
			<view class="btn tui-col-2" @tap="btnCmt">发表</view>
		</view>

		<!--加载loadding-->
		<tui-loadmore :visible="loadding" :index="3" type="primary"></tui-loadmore>
		<tui-nomore :visible="!pullUpOn" bgcolor="#fff" text="没有更多评论"></tui-nomore>
		<!--加载loadding-->
		<view class="tui-safearea-bottom"></view>
	</view>
</template>

<script>
	import tuiIcon from "@/components/icon/icon"
	import tuiTag from "@/components/tag/tag"
	import tuiListCell from "@/components/list-cell/list-cell"
	import tuiLoadmore from "@/components/loadmore/loadmore"
	import tuiNomore from "@/components/nomore/nomore"
	import tuiBadge from "@/components/badge/badge"
	export default {
		components: {
			tuiIcon,
			tuiTag,
			tuiListCell,
			tuiLoadmore,
			tuiNomore,
			tuiBadge
		},
		data() {
			return {
				fabulous: 0,
				isFabulous: false,
				isCollection: false,
				cmtList: [],
				pageIndex: 1,
				loadding: false,
				pullUpOn: true,
				limit: 6,
				commentId: 1,
				userId: 1,
				val: '',
				commentInfo: {},
				isUserCon: false
			}
		},
		onLoad(option) {
			this.commentId = option.commentId;
			this.userId = option.userId;
			console.log(this.$store.getters)
			if (this.userId == this.$store.getters.getUserInfos.userId) {
				this.isUserCon = true;
			}
			console.log(this.isUserCon, this.userId, this.$store.getters.getUserInfos.userId)
			this.getCommentById()
			this.getCommList()
		},
		computed: {
			iconColor() {
				return this.isFabulous ? '#5677fc' : '#333'
			},
			iconName() {
				return function(isFabulous) {
					return isFabulous ? 'agree-fill' : 'agree'
				}
			}
		},
		methods: {
			btnFabulous: function() {
				this.$api.addPraise({
					commentId: this.commentId
				}, res => {
					if (res.code) {
						this.$common.successToShow(res.data.info, () => {
							this.isFabulous = !this.isFabulous
							this.fabulous = this.isFabulous ? this.fabulous + 1 : this.fabulous - 1;
						})
					}
				})
			},
			collection: function() {
				this.$api.addFollow({
					touserId: this.userId
				}, res => {
					if (res.code) {
						this.$common.successToShow(res.data.info, () => {
							this.isCollection = !this.isCollection;
						})
					}
				})
			},
			btnCmt: function() {
				let info = this.$store.getters.getUserInfos
				console.log(info)
				if (!(this.val || this.val.length)) {
					this.$common.errorToShow("请输入合法评论");
					return;
				}
				this.$api.addComm({
					commentId: this.commentId,
					comentCom: this.val
				}, res => {
					if (res.code) {
						this.cmtList.unshift({
							comentCom: this.val,
							userName: info.userName,
							userUrl: info.userUrl
						})
						this.$common.successToShow("评论成功", () => {
							this.val = ''
						})
					}
				})
			},
			getCommentById() {
				this.$api.getCommentById({
					commentId: this.commentId,
					touserId: this.userId
				}, (res) => {
					if (res.code) {
						this.commentInfo = res.data[0]
						this.isFabulous = res.data[0].isFabulous;
						this.isCollection = res.data[0].isCollection;
						this.fabulous = res.data[0].commentPraise
					}
				})
			},
			getCommList() {
				this.$api.getCommList({
					commentId: this.commentId,
					page: this.pageIndex,
					limit: this.limit
				}, res => {
					if (res.code) {
						this.cmtList = res.data
					}
				})
			}
		},
		onReachBottom: function() {
			if (!this.pullUpOn) return;
			this.loadding = true
			this.pageIndex++;
			this.$api.getCommList({
				commentId: this.commentId,
				page: this.pageIndex,
				limit: this.limit
			}, (res) => {
				if (res.code) {
					let arr = JSON.parse(JSON.stringify(this.cmtList));
					this.cmtList = this.cmtList.concat(arr);
					this.loadding = false
				} else {
					this.loadding = false;
					this.pullUpOn = false
				}
			})

		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
		color: #333;
	}

	.btn {}

	.container {
		padding: 40rpx 30rpx 110rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-news-title {
		font-size: 48rpx;
		font-weight: 500;
		text-align: justify;
	}

	.tui-sub-info {
		padding-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #999;
	}

	.tui-author {
		color: #5677fc;
		padding-right: 20rpx;
	}

	.tui-news-content {
		padding-top: 40rpx;
	}

	.tui-article {
		/* text-indent: 2em; */
		font-size: 34rpx;
		padding-bottom: 40rpx;
		line-height: 60rpx;
		text-align: justify;
		word-break: break-all;
		word-wrap: break-word;
	}

	.tui-article-pic {
		width: 100%;
		display: block;
		margin-bottom: 40rpx;
	}

	.tui-news-source {
		font-size: 24rpx;
		color: #999;
	}

	.tui-operate-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 60rpx 40rpx;
		box-sizing: border-box;
	}

	.tui-tag-class {
		min-width: 130rpx;
		padding: 20rpx 52rpx !important;
		font-size: 26rpx !important;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-black {
		color: #333;
		padding-left: 12rpx;
		overflow: hidden;

		&::after {
			width: 0upx;
			height: 0pux;
		}
	}

	.tui-cmt-title {
		font-size: 30rpx;
		font-weight: bold;
		position: relative;
	}

	.tui-cmt-title::after {
		content: '';
		position: absolute;
		left: -18rpx;
		top: 18%;
		width: 6rpx;
		height: 64%;
		background: #5677fc;
	}

	.tui-cmtbox {
		padding-bottom: 20rpx;
	}

	.tui-cmt-cell {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding-top: 44rpx;
	}

	.tui-avatar {
		width: 64rpx;
		height: 64rpx;
		border-radius: 32rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-cmt-detail {
		width: 100%;
		padding-left: 16rpx;
		box-sizing: border-box;
	}

	.tui-header-box {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		font-size: 30rpx;
	}

	.tui-cmt-nickname {
		color: #5677fc;
	}

	.tui-fabulous {
		color: #9a9a9a;
	}

	.tui-fabulous text {
		padding-right: 4rpx;
		font-size: 24rpx
	}

	.tui-cmt-content {
		font-size: 32rpx;
		color: #333;
		text-align: justify;
		padding-top: 8rpx;
		word-break: break-all;
		word-wrap: break-word;
	}

	.tui-reply-box {
		border-radius: 8rpx;
		overflow: hidden;
		margin-top: 16rpx;
	}

	.tui-cell-class {
		flex-direction: column;
		justify-content: flex-start !important;
		padding: 20rpx !important;
		text-align: justify;
		word-break: break-all;
		word-wrap: break-word;
	}

	.tui-cell-last {
		color: #5677fc;
	}

	.tui-flex-1 {
		flex: 1;
		width: 100%;
	}

	.tui-reply-nickname {
		font-size: 24rpx;
		color: #7a7a7a;
		padding-bottom: 8rpx;
	}

	.tui-footer {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		margin-top: 16rpx;
		color: #9a9a9a;
	}

	.tui-primary {
		color: #5677fc !important;
	}

	.tui-ml {
		margin-left: 16rpx;
	}

	.tui-cell-last .tui-icon-class {
		width: 40rpx !important;
		margin-left: -10rpx;
	}

	.tui-operation {
		width: 100%;
		height: 100rpx;
		overflow: hidden;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99999;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}

	.tui-sub-right {
		background-color: transparent;
		border: 2upx solid #42BD56;
		border-radius: 8upx;
		padding: 5upx 30upx;
	}

	.tui-operation::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tui-operation-left {
		display: flex;
		align-items: center;
	}

	.tui-operation-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
	}

	.tui-operation-right {
		height: 100rpx;
		box-sizing: border-box;
		padding-top: 0;
	}

	.tui-badge-class {
		color: #5677fc !important;
		position: absolute;
		top: -6rpx;
		padding: 2px 4px !important;
		/* #ifdef H5 */
		transform: translateX(50%) scale(0.8);
		/* #endif */
	}

	.tui-right-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-btn-comment {
		height: 64rpx;
		width: 84%;
		background: #ededed;
		color: #999;
		border-radius: 8rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		box-sizing: border-box;
		padding-top: 0;
		margin-left: 30rpx;
	}

	.tui-col-7 {
		width: 58.33333333%;
	}

	.tui-col-5 {
		width: 41.66666667%;
	}

	.tui-col-10 {
		width: 84.333333333%;
	}

	.tui-col-2 {
		width: 16.6666666%;
	}

	.tui-share-btn {
		display: block;
		background: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}

	button:after {
		content: none;
	}

	button::after {
		border: none;
	}
</style>
